experiencing the same issue

Due https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/index.js#L459

What does this warning mean? How do we resolve it?

We are trying to generate a CSS file but your codebase has multiple possible orderings for these modules.

In this case you used table before button in one location and button before table in another location. We need to generate a single CSS file for these and can't decide which one should be first. In this case we put table before button. But this is chosen without reason. In future build we may decide the other way. But since CSS cares for rule order this can lead to issue when CSS changes without reason.

So not defining a clear order can lead to fragile builds, that's why we display a warning here.

There are two things that you can do:

Sort your imports to create a consistent order. I must admit that the warning could be improved to point to the locations that need to be changed.

Ignore the warning with stats.warningFilter when the order of these styles doesn't matter. Maybe the eventually add an option to mark order-independent styles directly.

also got these "conflicting order between " while compiling and a rollback to 0.4.1 solved the problem...

@wende60 you should solve order problem, not downgrade

@evilebottnawi unfortunally i do not even understand what i have to order here... the loaders? Maybe you can give me a hint...

@wende60 looks above and read post #250 (comment)

@evilebottnawi do i understand it right: i should play around with the order of imports in the file that is - maybe - the location? Ok, will tryout... thanks

We used the sort-import plugin for VS Code to insure our entire team is importing modules in the same order.
https://marketplace.visualstudio.com/items?itemName=amatiasq.sort-imports

Unfortunately, even after insuring the order is the same, we still see these warnings from the mini-css-extract-plugin

@timothywisdom Sorting imports/modules per file (within) !== Import/Module Order in the Import/Module Tree/Graph (in relation to other files)

This seems like an unreasonable request (to ensure order within our graph)... we need a way to turn this off for projects that don't care. For example, in my projects each component's styles are self contained so order is only important within each component. (each component has a very unique class name root and all selectors are scoped to them)

I'm confused - how do I sort "Import/Module Order in the Import/Module Tree/Graph"?

I think you would have to layout all your imports and make sure to always import things in the same order following the tree traversal order. (Not ideal)

I believe I have done that via the sort-imports plugin for VS Code.
This insures all imported modules are imported via the same order logic in every file. But according to @michael-ciniawsky, that's not good enough so I'm not sure how to proceed.

Edit: actually, I'm sorting them alphabetically, not by tree-traversal order. That would be a nightmare to figure out for every file

It's very inconvenient at best and realistically unmanagable at a certain project size. That's what CSS Module (automatically) or a CSS naming convention (e.g BEM/ITCSS(Namspace + BEM)) (manually) are for. Nevertheless if one uses CSS without particular care on the matter he/she likely runs into issue with the CSS Cascade and there should be a warning at least (optional)

@timothywisdom It's always hard to tell why you get these warnings and where within your project. I'm not saying sorting them for every file doesn't eventually help, but it definitely will not solve all issues.

See #250 (comment)

We are trying to generate a CSS file but your codebase has multiple possible orderings for these modules.

In this case you used table before button in one location and button before table in another location. We need to generate a single CSS file for these and can't decide which one should be first. In this case we put table before button. But this is chosen without reason. In future build we may decide the other way. But since CSS cares for rule order this can lead to issue when CSS changes without reason.

This was truly a bug I think. I have following structure:

├── ActionSheetCard
│   ├── index.js
│   └── index.less
├── CardWrap
│   └── index.js
├── ImageView
│   └── index.js
├── Request
│   ├── index.js
│   └── index.less
├── ToAlipay
│   ├── index.js
│   └── index.less
├── ToNewUrl
│   ├── index.js
│   └── index.less
├── color.less
└── index.js

Each index.less was imported by its adjacent index.js, but this warning was still here:

chunk vendors [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/[email protected]@css-loader??ref--18-2!./node_modules/[email protected]@postcss-loader/src??postcss!./node_modules/[email protected]@less-loader/dist/cjs.js??ref--18-4!./node_modules/[email protected]@antd-mobile/lib/style/index.less
 * css ./node_modules/[email protected]@css-loader??ref--18-2!./node_modules/[email protected]@postcss-loader/src??postcss!./node_modules/[email protected]@less-loader/dist/cjs.js??ref--18-4!./node_modules/[email protected]@antd-mobile/es/action-sheet/style/index.less
 * css ./node_modules/[email protected]@css-loader??ref--18-2!./node_modules/[email protected]@postcss-loader/src??postcss!./node_modules/[email protected]@less-loader/dist/cjs.js??ref--18-4!./node_modules/[email protected]@antd-mobile/es/toast/style/index.less
 * css ./node_modules/[email protected]@css-loader??ref--18-2!./node_modules/[email protected]@postcss-loader/src??postcss!./node_modules/[email protected]@less-loader/dist/cjs.js??ref--18-4!./node_modules/[email protected]@antd-mobile/es/button/style/index.less
 * css ./node_modules/[email protected]@css-loader??ref--18-2!./node_modules/[email protected]@postcss-loader/src??postcss!./node_modules/[email protected]@less-loader/dist/cjs.js??ref--18-4!./node_modules/[email protected]@antd-mobile/es/white-space/style/index.less

@ulivz the warning output you gave doesn't line up with your example structure.

Tried to add ignoreOrder: true but I'm getting some Cannot read property 'createChildCompiler' of undefined errors, has anyone encountered the same issue? Looks like it's coming from the thread-loader plugin but I couldn't find any solution there.

Sort your imports to create a consistent order.

@sokra do you know any practical way to do that? As pointed out above, alphabetical order doesn't always work:

// a.entry.js
import './a.css'
import './b.css'

// b.entry.js
import './b.css'
import './c.js'

// c.js
import './a.css'

Here, all the imports are sorted alphabetically, but a.entry.js and b.entry.js have different order of CSS files

Still waitting for this 😇 🙏

Sort your imports to create a consistent order. I must admit that the warning could be improved to point to the locations that need to be changed.

Solving this warnings by disable them globaly is wrong. The messages are useful when you have nested use of same components and then the order is important!

// Some.vue
import Decor from 'Decor.vue';
import SomethingDifferent from 'SomethingDifferent';

// SomethingDifferent.vue
import Decor from 'Decor.vue'; // completely different use of the same component

So the solution here is "lazy" loading (getting this from Webpack doc (?) not sure now)

// SomethingDifferent.vue
const Decor = () => import('Decor.vue');

There is now an NPM package named @webkrafters/ordercss which tackles this issue.

Full disclosure: I initially created it to solve this very problem in one of my apps but decided to expand it and share it with everyone.

If this package helps anyone, please share it with others.

Thanks and good luck!

same issue here💔

same issue here💔

@cdll working on this too... will get back here if I find anything. Any luck for you?

I wrote a detailed explanation of why this happens and what are the solutions at: https://stackoverflow.com/a/67579319

So how do we fix this when everything is ordered and the error still occurs, yet we don't just want to disable the warnings?

NOTE FOR FUTURE READERS: See #250 (comment) for a more up-to-date comment

It felt easier to us to use a plugin called webpack-filter-warnings-plugin for this, so if anyone's curios, this is how this warning can be ignored:

const FilterWarningsPlugin = require('webpack-filter-warnings-plugin'); 

const config = {
  plugins: [
    // Silence mini-css-extract-plugin generating lots of warnings for CSS ordering.
    // We use CSS modules that should not care for the order of CSS imports, so we
    // should be safe to ignore these.
    //
    // See: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250
    new FilterWarningsPlugin({
      exclude: /mini-css-extract-plugin[^]*Conflicting order between:/
    })
  ]
}

As you can see from our comment, we're not 100% sure we're safe but at least we try to document why this warning can be ignored. I suggest others filtering these warnings do something similar ☺️

This works, except the warning doesn't show Conflicting order between: anymore, it's just Conflicting order, so just remove the between: from the end before the last slash of the exclude property, and you should be good to go.